<!--
 * @Description:  
 * @Autor: 孙婧雯
 * @Date: 2021-07-04 14:57:12
 * @LastEditors: 孙婧雯
 * @LastEditTime: 2021-07-04 16:03:12
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn1">add</button>
  <button id="btn2">delete</button>
  <ul id="ul1">
    <li>001</li>
    <li>002</li>
    <li>003</li>
  </ul>
  <script>
    var oBtn1 = document.getElementById('btn1')
    var oUl1 = document.getElementById('ul1')
    oBtn1.onclick = function () {
      var oLi = document.createElement('li');
      oLi.innerHTML = Math.random();
      // oLi.onclick = function () {
      //   console.log(this.innerHTML);
      // }
      oUl1.appendChild(oLi)
    }

    var oBtn2 = document.getElementById('btn2');
    oBtn2.onclick = function () {
      oUl1.removeChild(oUl1.lastElementChild)
    }


    // 
    // var aLi = document.getElementsByTagName('li')
    // for (var i = 0; i < aLi.length; i++) {
    //   aLi[i].onclick = function () {
    //     console.log(this.innerHTML);
    //   }
    // }

    // 事件委托（利用事件冒泡的特性，给父元素绑定事件）

    oUl1.onclick = function (e) {
      var target = e.target
      if (target.tagName == 'LI') {
        console.log(target.innerHTML);
      }
    }
  </script>
</body>

</html>